<template>
	<view>
		<!-- 导航栏 -->
		<navBar pageTitle="Q版图组"></navBar>

		<!-- #ifdef H5 -->
		<view :style="{height:'120rpx'}">
		</view>
		<!-- #endif -->

		<view @tap="heightShow = false" class="content">
			<h3 class="Q-title" v-if="!heightShow">Q图</h3>
			<h3 class="Q-title" v-else>{{qObj.name}}</h3>
			<div class="container " :class="heightShow ? 'cardActive' :''">
				<div class="card">
					<div @tap.stop="preView()" class="face back">
						<image :src="qObj.imgUrl" class="back-img" mode="aspectFill"></image>
					</div>
					<div @tap.stop="heightShow = !heightShow" class="face front">
					</div>
				</div>
			</div>

			<view class="numSty">
				<view class="num-con">
					<h2>6</h2>
				</view>
				<view class="num-con">
					<h2 v-if="qObj.num === null"></h2>
					<h2 v-else>{{qObj.num}}</h2>
				</view>
			</view>
			<h6 class="h6">俩个数字相同代表抽中</h6>

			<view :class="scaleXShow ? 'myani' : ''">
				<button @tap.stop="handleBtn()" class="button">
					<span class="button-content">抽资格</span>
				</button>
			</view>

			<!-- 缤纷动画 -->
			<div v-if="awardShow" class="results-summary-container">
				<div class="confetti">
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
					<div class="confetti-piece"></div>
				</div>
			</div>
			
			<!-- 其他Q图 -->
			<view class="other">
				<view @tap.stop="handleOther(item)" class="other-view" :class="item.id === index ? 'other-active' : ''" v-for="(item,i) in qList" :key="item.id">
					<image :src="item.imgUrl" mode="aspectFill"></image>
					<text class="other-icon iconfont " :class="item.id === index ? 'icon-tuzu': ''"></text>
				</view>
				<view class="empty"></view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<tabBar pagePath="pagesC/discover/discover"></tabBar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				heightShow: false,
				scaleXShow: false,
				awardShow: false,
				qObj: {},
				index:1,
			};
		},
		onLoad() {
			uni.hideTabBar()
			this.qObj = {...this.qList[0]}
			console.log(uni.getStorageSync('downloadList'));
		},
		methods: {
			...mapMutations('discover', ['changeNum']),
			// 抽奖
			handleBtn() {
				if (this.qObj.num !== 6) {
					this.scaleXShow = true
					this.heightShow = true
					setTimeout(() => {
						// 获取随机数
						let q = Math.floor(Math.random() * 10)
						// 赋值给对应图组
						let obj = {id:this.qObj.id,num:q}
						if (this.qObj.id === 1) {
							this.changeNum(obj)
						} else if(this.qObj.id === 2){
							this.changeNum(obj)
						} else if(this.qObj.id === 3){
							this.changeNum(obj)
						}
						// 获取新的vuex值
						this.qObj = {...this.qList[this.index - 1]}
						// 随机数为6代表抽中
						if (q === 6) {
							this.awardShow = true
							this.uniModel('抽中购买Q版图组资格,是否去购买')
						} else {
							this.uniToast('很遗憾,未抽中购买资格')
							this.scaleXShow = false
						}

					}, 800)
				} else {
					this.uniModel('已拥有购买当前Q版图组资格,是否去购买？')
				}

			},
			preView() {
				this.uniToast('还未购买,赞不可查看该图组')
			},
			// 点击其他Q图
			handleOther(item){
				this.heightShow = true
				this.awardShow = false
				this.index = item.id
				this.qObj = item
			},

			// 再次封装模态框
			uniModel(content) {
				uni.showModal({
					title: '恭喜',
					content: content,
					confirmColor: '#24bfa5',
					cancelColor: '#959595',
					success: (res) => {
						if (res.confirm) {
							this.uniToast('暂未开放购买功能')
						} else {
							this.uniToast('已取消')
						}
					}
				})
			},
			// 再次封装轻提示
			uniToast(title) {
				uni.showToast({
					icon: 'none',
					title: title
				})
			}
		},
		computed: {
			...mapState('discover', ['qList'])
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		text-align: center;
		margin: auto;

		h2 {
			font-size: 80rpx;
			background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
			background-size: 100%;
			/* 实现图文混合效果 */
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.h6 {
			color: #dee1e6;
			margin-top: 10rpx;
		}

		.numSty {
			padding: 20rpx;
			margin-top: 20rpx;
			font-size: 80rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.num-con {
				background-color: #000;
				padding: 20rpx;
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				letter-spacing: 20rpx;
				border-radius: 35rpx;
			}
		}

		@keyframes float {
			0% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-7px);
			}

			100% {
				transform: translateY(0);
			}
		}

		.Q-title {
			margin-bottom: 20rpx;
		}

		.card {
			position: relative;
			width: 400rpx;
			height: 600rpx;
			margin: 0 auto;
			background: #000;
			border-radius: 15px;
			box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
			animation: float 2s ease-in-out infinite;
		}

		.face {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.face.back {
			box-sizing: border-box;
			border-radius: 25px;
		}

		.back-img {
			border-radius: 25px;
			width: 100%;
			height: 100%;
		}

		.face.front {
			transition: 0.5s;
		}


		.cardActive {
			.front {
				height: 20px;
			}
		}


		.face.front {
			background-color: #24b9a0;
			background-image: url('https://snowcyans.gitee.io/static-warehouse/static/Q.jpg');
			background-size: cover;
			background-position: top center;
			border-radius: 25px;
		}

		// 缤纷动画
		.results-summary-container {
			.confetti-piece {
				position: absolute;
				width: 10px;
				height: 20px;
				background-color: hsl(39, 100%, 56%);
				top: 0;
				opacity: 0;
				animation: makeItRain 3000ms infinite linear;
			}

			.confetti-piece:nth-child(1) {
				left: 7%;
				transform: rotate(-10deg);
				animation-delay: 182ms;
				animation-duration: 2000ms;
			}

			.confetti-piece:nth-child(2) {
				left: 14%;
				transform: rotate(20deg);
				animation-delay: 161ms;
				animation-duration: 2076ms;
			}

			.confetti-piece:nth-child(3) {
				left: 21%;
				transform: rotate(-51deg);
				animation-delay: 481ms;
				animation-duration: 2103ms;
			}

			.confetti-piece:nth-child(4) {
				left: 28%;
				transform: rotate(61deg);
				animation-delay: 334ms;
				animation-duration: 1008ms;
			}

			.confetti-piece:nth-child(5) {
				left: 35%;
				transform: rotate(-52deg);
				animation-delay: 302ms;
				animation-duration: 1776ms;
			}

			.confetti-piece:nth-child(6) {
				left: 42%;
				transform: rotate(38deg);
				animation-delay: 180ms;
				animation-duration: 1168ms;
			}

			.confetti-piece:nth-child(7) {
				left: 49%;
				transform: rotate(11deg);
				animation-delay: 395ms;
				animation-duration: 1200ms;
			}

			.confetti-piece:nth-child(8) {
				left: 56%;
				transform: rotate(49deg);
				animation-delay: 14ms;
				animation-duration: 1887ms;
			}

			.confetti-piece:nth-child(9) {
				left: 63%;
				transform: rotate(-72deg);
				animation-delay: 149ms;
				animation-duration: 1805ms;
			}

			.confetti-piece:nth-child(10) {
				left: 70%;
				transform: rotate(10deg);
				animation-delay: 351ms;
				animation-duration: 2059ms;
			}

			.confetti-piece:nth-child(11) {
				left: 77%;
				transform: rotate(4deg);
				animation-delay: 307ms;
				animation-duration: 1132ms;
			}

			.confetti-piece:nth-child(12) {
				left: 84%;
				transform: rotate(42deg);
				animation-delay: 464ms;
				animation-duration: 1776ms;
			}

			.confetti-piece:nth-child(13) {
				left: 91%;
				transform: rotate(-72deg);
				animation-delay: 429ms;
				animation-duration: 1818ms;
			}

			.confetti-piece:nth-child(14) {
				left: 94%;
				transform: rotate(-72deg);
				animation-delay: 429ms;
				animation-duration: 818ms;
			}

			.confetti-piece:nth-child(15) {
				left: 96%;
				transform: rotate(-72deg);
				animation-delay: 429ms;
				animation-duration: 2818ms;
			}

			.confetti-piece:nth-child(16) {
				left: 98%;
				transform: rotate(-72deg);
				animation-delay: 429ms;
				animation-duration: 2818ms;
			}

			.confetti-piece:nth-child(17) {
				left: 50%;
				transform: rotate(-72deg);
				animation-delay: 429ms;
				animation-duration: 2818ms;
			}

			.confetti-piece:nth-child(18) {
				left: 60%;
				transform: rotate(-72deg);
				animation-delay: 429ms;
				animation-duration: 1818ms;
			}

			.confetti-piece:nth-child(odd) {
				background-color: hsl(0, 100%, 67%);
			}

			.confetti-piece:nth-child(even) {
				z-index: 1;
			}

			.confetti-piece:nth-child(4n) {
				width: 6px;
				height: 14px;
				animation-duration: 4000ms;
				background-color: #c33764;
			}

			.confetti-piece:nth-child(5n) {
				width: 3px;
				height: 10px;
				animation-duration: 4000ms;
				background-color: #b06ab3;
			}

			.confetti-piece:nth-child(3n) {
				width: 4px;
				height: 12px;
				animation-duration: 2500ms;
				animation-delay: 3000ms;
				background-color: #dd2476;
			}

			.confetti-piece:nth-child(3n-7) {
				background-color: hsl(166, 100%, 37%);
			}

			@keyframes makeItRain {
				from {
					opacity: 0;
				}

				50% {
					opacity: 1;
				}

				to {
					transform: translateY(250px);
				}
			}
		}

		.button {
			position: relative;
			margin-top: 30rpx;
			overflow: hidden;
			width: 400rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 2rem;
			border-radius: 1.5rem;
			background: #3d3a4e;
			background-size: 400%;
			color: #fff;
			border: none;
		}

		.myani {
			.button:hover::before {
				transform: scaleX(1);
			}
		}


		.button-content {
			position: relative;
			z-index: 1;
		}

		.button::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			transform: scaleX(0);
			transform-origin: 0 50%;
			width: 100%;
			height: inherit;
			border-radius: inherit;
			background: linear-gradient(82.3deg,
					rgba(150, 93, 233, 1) 10.8%,
					rgba(99, 88, 238, 1) 94.3%);
			transition: all 0.475s;
		}
		
		.other{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 30rpx;
			.other-view{
				width: 205rpx;
				height: 300rpx;
				border-radius: 35rpx;
				margin: 0 15rpx;
				
				image{
					width: 100%;
					height: 100%;
					border-radius: 35rpx;
				}
				.other-icon{
					display: block;
					position: relative;
					font-size: 60rpx;
					top: -65%;
					left: -5%;
					color: #0cbaba;
					z-index: 9;
				}
			}
			.empty{
				width: 100%;
				height: 200rpx;
			}
			.other-active{
				 opacity: 0.7;
			}
		}

	}
</style>